<script>
import { h } from 'vue'
import ADropdown from './ADropdown.vue'
import AControlGroup from './AControlGroup.vue'

export default {
    name: 'ADropdownButtonGroup',
    components: { AControlGroup, ADropdown },
    props: {
        displayCount: {
            type: Number,
            default: 0
        },
        /**
         * 对齐到target的方式
         */
        popPlacement: {
            type: String,
            default: 'bottom'
        },
        trigger: {
            type: String,
            default: 'click'
        },
    },
    data() {
        return {
            popShown: false,
        }
    },
    methods: {
        hidePop() {
            this.popShown = false
        }
    },
    render() {
        let buttons = this.$slots.default()
        let displayButtons = buttons.slice(0, this.displayCount)
        let hideButtons = buttons.slice(this.displayCount, buttons.length)

        let displayButtonElList = displayButtons.map(a => h(a))
        let hideButtonElList = hideButtons.map(a => h(a))

        if (hideButtonElList.length) {
            let moreBtnEl = h(ADropdown,
                {
                    popShown: this.popShown,
                    'onUpdate:popShown': value => this.popShown = value,
                    popPlacement: this.popPlacement,
                    trigger: this.trigger,
                },
                {
                    default: this.$slots.moreBtn,
                    pop: () => h(AControlGroup, {
                        direction: 'v',
                    }, {
                        default: () => hideButtonElList
                    })
                })
            displayButtonElList.push(moreBtnEl)
        }

        let displayGroupEl = h(AControlGroup, {}, {
            default: () => displayButtonElList
        })

        return displayGroupEl
    },
}
</script>